<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>
    <!--v-model 会忽略所有表单元素的 value、checked、selected
    特性的初始值而总是将 Vue 实例的数据作为数据来源。
    你应该通过 JavaScript 在组件的 data 选项中声明初始值。-->
    <div id="app1">
        <input type="text" v-model="message" placeholder="edit me">
        <p>Message is:{{message}}</p>


        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <div id="app2">
        <input type="checkbox" id="checkbox" checked="checked" v-mode="checked">
        <br>
        <lable for="checkbox">Checked names:{{checked}}</lable>
    </div>
    <div id="app3">
        <input type="checkbox" id="jack" value="Jack1" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
    <div id="example-4">
        <input type="radio" id="one" value="One1" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two1" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <div id="example-5">
        <!--<select v-model="selected">-->
        <select v-model="selected"  multiple style="width: 50px;">>
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <div id="example-6">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <div id="example-7">
        <!-- 当选中时，`picked` 为字符串 "a" -->
        <input type="radio" v-model="picked" value="a">

        <!-- `toggle` 为 true 或 false -->
        <input type="checkbox" v-model="toggle"  true-value="yes" false-value="no">

        <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
        <select v-model="selected">
            <option value="abc">ABC</option>
        </select>


        <input type="radio" v-model="pick" v-bind:value="a">
        <select v-model="selected">
            <!-- 内联对象字面量 -->
            <option v-bind:value="{ number: 123 }">123</option>
        </select>
    </div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el:"#app1",
        data:{
            message:"你好！"
        }
    })
    //单个复选框，绑定到布尔值：
    var app2 = new Vue({
        el:"#app2",
        data:{
            checked :""
        }
    })
    //多个复选框，绑定到同一个数组：
    var app3 = new Vue({
        el: '#app3',
        data: {
            checkedNames: ["Jack1"]
        }
    })
    //单选按钮
    var app4 = new Vue({
        el: '#example-4',
        data: {
            picked: 'One1'
        }
    })
    //选择框
    var app5 = new Vue({
        el: '...',
        data: {
            // selected: ''
            //多选时
            selected: []
        }
    })
    //选择框 用 v-for 渲染的动态选项：
    var app6 = new Vue({
        el: 'example-6',
        data: {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })

    //值绑定
    var app7 = new Vue({
        el: 'example-7',
        data: {
            picked:'',
            toggle:'',
            selected:''

        }
    })
</script>
</body>
</html>